<template>
	<div class='top-nav'>
		<el-avatar
			class="logo"
			:size="40"
			:src="LOGO"
			@click="$pushTo('Home')"
		/>
		<div
			class="title"
			@click="$pushTo('Home')"
		>
			Aha口袋
		</div>
		<div
			style="flex: 1;"
			class="blank"
		/>
		<!-- 头像和昵称 -->
		<div v-if="user">
			<el-dropdown>
				<div class="user">
					{{user.nickname || 'Aha小萌新'}}
					<el-avatar
						:size="40"
						:src="user.avatarUrl|| LOGO"
					/>
				</div>
				<template #dropdown>
					<el-dropdown-menu>
						<el-dropdown-item @click="onclickLoginOut">退出登录</el-dropdown-item>
					</el-dropdown-menu>
				</template>
			</el-dropdown>
		</div>
	</div>
</template>

<script setup lang="ts">
import { LOGO } from '@/constants/index'
import { storeGetter, storeCommit } from '@/utils/store'
import { UserInfoType } from '@/modules/user'
import { $confirm, $pushTo } from '@/utils/functions'
import { computed } from '@vue/reactivity'

const user = computed<UserInfoType>(() => storeGetter('getUserInfo') ? storeGetter('getUserInfo').userInfo : null)
const onclickLoginOut = () => {
  $confirm('确认退出登录？', () => {
    storeCommit('loginOut')
  })
}
</script>

<style lang="scss" scoped>
.top-nav {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 99;
  display: flex;
  align-items: center;
  padding: 10px 15px;
  background-color: #ffffff;
  box-shadow: $shadow2;

  .logo,
  .user {
    cursor: pointer;
  }

  .title {
    margin-left: 10px;
    font-weight: bold;
    color: $primary1;
    cursor: pointer;
  }

  .user {
    display: flex;
    align-items: center;
    font-size: $sSmall;

    .el-avatar {
      margin-left: 5px;
    }
  }
}
</style>
